<template>
  <div class="app-container app-containerlivingAllowances app-containerMoneytabel">
    <div class="filter-container">
      <region-selector  :disabled="view" :province="region.province" :city="region.city" :area="region.area"
        :street="region.street" :community="region.community" :hideProvince="region.city!==0" :hideCity="region.area!==0"
        :hideArea="region.street!==0 || region.area!==0"  @region="setAreaCode">
      </region-selector>
      <el-select class="smallSelect" style="marginRight:15px;" size="small" v-model="listQuery.householdType" placeholder="请选择户口类别">
        <el-option v-for="item in options['householdType']" :value="item.value" :label="item.label" :key="item.value"></el-option>
      </el-select>
      <el-select class="smallSelect" style="marginRight:15px;" size="small" v-model="listQuery.status" placeholder="请选择状态">
        <el-option v-for="item in options['approvalStatus']" :value="item.value" :label="item.label" :key="item.value"></el-option>
      </el-select>
      <el-date-picker type="daterange" size="small" v-model="listQuery.queryTime" value-format="timestamp" range-separator="-" start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-checkbox v-model="listQuery.remindFlag">70岁以上老人</el-checkbox>
      <el-button class="filter-item filter-itemBut" type="primary" size="small" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-row class="filter-container-option">
      <div style="margin-right: 15px;" :span="1">
        <el-button type="warning" size="small" @click="handleExportExcel" plain>导出</el-button>
      </div>
      <div style="margin-right: 15px;" :span="1">
        <el-button type="primary" size="small" @click="printPress(1)" plain>打印</el-button>
      </div>
      <div style="margin-right: 15px;" :span="1">
        <el-button type="success" size="small" @click="handleGive" plain>发放</el-button>
      </div>
      <div style="margin-right: 15px;" :span="1">
        <el-button type="info" size="small" plain @click="exportMemberExcel">导出家庭成员</el-button>
      </div>
    </el-row>
    <el-table :data="list" v-loading="listLoading" element-loading-text="Loading" tooltip-effect="dark"
      @selection-change="handleSelectionChange" border fit highlight-current-row ref="multipleTable">
      <el-table-column 
        type="selection"
        >
      </el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column label="姓名" align="center" width="100">
        <template slot-scope="scope">
          {{scope.row.approvalUserName}}
        </template>
      </el-table-column>
      <el-table-column label="行政区域" align="center" width="120">
        <template slot-scope="scope">
          {{scope.row.areaName}}
        </template>
      </el-table-column>
      <el-table-column label="家庭住址" align="center" width="120">
        <template slot-scope="scope">
          {{scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column label="户口类别" align="center" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.householdType ">{{scope.row.householdType | mapLabel('householdType')}}</span>
          <span v-else>{{scope.row.householdTypeName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.idCard" placement="top-start">
            <p>{{scope.row.idCard | idCardFun}}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="一卡通账号" align="center" width="150">
        <template slot-scope="scope">
          {{scope.row.account}}
        </template>
      </el-table-column>
      <el-table-column label="保障人口" align="center" width="80">
        <template slot-scope="scope">
          {{scope.row.livingAllowancesNumber}}
        </template>
      </el-table-column>
      <el-table-column label="基础低保金" align="center" width="100">
        <template slot-scope="scope">
          {{scope.row.baseMoney}}
        </template>
      </el-table-column>
      <el-table-column label="分类施保金" align="center" width="100">
        <template slot-scope="scope">
          {{scope.row.flsbMoney}}
        </template>
      </el-table-column>
      <el-table-column label="电价补贴" align="center" width="80">
        <template slot-scope="scope">
          {{scope.row.electricitySubsidy}}
        </template>
      </el-table-column>
      <el-table-column label="核定金额" align="center" width="80">
        <template slot-scope="scope">
          {{scope.row.approvedMoney}}
        </template>
      </el-table-column>
      <el-table-column label="增调整" align="center" >
        <template slot-scope="scope">
          {{scope.row.increase}}
        </template>
      </el-table-column>
      <el-table-column label="减调整" align="center" >
        <template slot-scope="scope">
          {{scope.row.reduce}}
        </template>
      </el-table-column>
      <el-table-column label="补助状态" align="center" >
        <template slot-scope="scope">
          {{ scope.row.status | mapLabel('approvalStatus')}}
        </template>
      </el-table-column>
      <el-table-column class="" fixed="right" align="center" label="操作" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" plain size="mini" @click="handleDetail(scope.row)">详情</el-button>
          </div>
          <!--这里要做权限控制-->
          <div v-if="scope.row.status===5 || scope.row.status===7 || scope.row.status===8">
            <el-row style="margin-top:10px;">
              <el-button v-permission="['businessQuery_livingAllowancesChange']" size="mini" plain @click="handleChange(scope.row)" type="warning">修改</el-button>
            </el-row>
            <el-row style="margin-top:10px;">
              <el-button size="mini" plain type="warning" @click="handleChangeReport(scope.row)">修改上报</el-button>
            </el-row>
          </div>
          <div>
            <el-button style="margin-top:10px;" v-if="scope.row.status===6 && scope.row.approvalKey!=='LIVING_ALLOWANCES_CHANGE' 
              && scope.row.approvalKey!=='LIVING_ALLOWANCES_CHANGE_REPORT'" 
              size="mini" plain type="success" @click="handleAgain(scope.row)">再次申请</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="低保业务" width="70%" :visible.sync="isexpressPrint">
      <div id="expressPrint">
        <expressPrint :list="multipleSelection"></expressPrint>
      </div>
      <div class="expressPrint_ft">
        <el-button type="primary" size="small" @click="printPress(2)" plain>确认打印</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导出数据项" :visible.sync="exportExcelDialog">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAllColumns" @change="handleCheckAllColumnsChange">全选</el-checkbox>
      <el-checkbox  v-model="listQuery.xlsx">是否导出xlsx</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="listQuery.columns" @change="handleCheckColumnsChange">
        <el-checkbox v-for="column in exportColumns" :label="column.value" :checked="column.checked" :key="column.value">{{column.label}}</el-checkbox>
      </el-checkbox-group>
      <div class="expressPrint_ft">
        <el-button type="primary" size="small" @click="exportExcel" plain>确认导出</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryLivingAllowances,
  exportLaExcel,
  exportLaMemberExcel,
  laGive
} from "@/api/bizQuery";
import RegionSelector from "@/components/RegionSelector";
import expressPrint from "./module/expressPrint";
import { queryLADetail } from "@/api/approval";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { getToken } from "@/utils/auth";
export default {
  directives: { permission },
  components: {
    RegionSelector,
    expressPrint
  },
  props: ['approvalKey'],
  data() {
    return {
      options: this.$store.state.dict.options,
      isexpressPrint: false,
      list: null,
      total: 0,
      listLoading: true,
      baseURL: process.env.BASE_API,
      exportExcelUrl: process.env.BASE_API + "/living-allowances/search/export",
      exprotMemberExcelUrl:
        process.env.BASE_API + "/living-allowances/search/member-export",
      multipleSelection: [],
      listQuery: {
        page: 1,
        size: 10,
        areaCode: null,
        status: null,
        startTime: null,
        endTime: null,
        queryTime: [],
        remindFlag: false,
        householdType: null,
        approvalKey: this.approvalKey,
        columns: [],
        xlsx: true,
        sort: "+id"
      },
      exportExcelDialog: false,
      isIndeterminate: true,
      checkAllColumns: false,
      exportColumns: [
        { label: "姓名", value: "approvalUserName" },
        { label: "行政区域", value: "areaCode" },
        { label: "现居地", value: "address" },
        { label: "户口类别", value: "householdTypeName" },
        { label: "身份证", value: "idCard" },
        { label: "一卡通账号", value: "account" },
        { label: "保障人口", value: "livingAllowancesNumber" },
        { label: "基础低保金", value: "baseMoney" },
        { label: "分类施保金", value: "flsbMoney" },
        { label: "电价补贴", value: "electricitySubsidy" },
        { label: "核定金额", value: "approvedMoney" },
        { label: "增调整情况", value: "increase" },
        { label: "减调整情况", value: "reduce" },
        { label: "补助状态", value: "status" }
      ],
      region: this.$store.state.user.region
    };
  },
  mounted: function() {
    this.fetchData();
  },
  methods: {
    printPress(i) {
      if (this.multipleSelection.length > 0) {
        if (i == 1) {
          this.isexpressPrint = true;
        } else if (i == 2) {
          if (getLodop()) {
            this.CreateOneFormPage();
          }
        } else {
          this.isexpressPrint = false;
        }
      } else {
        this.$message({
          message: "请选择打印内容",
          type: "info"
        });
      }
    },
    CreateOneFormPage() {
      let LODOP = "";
      LODOP = getLodop();
      LODOP.PRINT_INIT("低保业务");
      LODOP.SET_PRINT_STYLE("FontSize", 16);
      LODOP.SET_PRINT_PAGESIZE(3);
      LODOP.ADD_PRINT_HTM(
        "0",
        "0",
        "100%",
        "100%",
        document.getElementById("expressPrint").innerHTML
      );
      LODOP.PREVIEW();
    },
    fetchData() {
      this.listLoading = true;
      queryLivingAllowances(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
      this.listLoading = false;
    },
    handleFilter() {
      if (this.listQuery.queryTime.length > 1) {
        this.listQuery.startTime = this.listQuery.queryTime[0] / 1000;
        this.listQuery.endTime = this.listQuery.queryTime[1] / 1000;
      }
      this.listQuery.page = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      if (this.listQuery.queryTime.length > 1) {
        this.listQuery.startTime = this.listQuery.queryTime[0] / 1000;
        this.listQuery.endTime = this.listQuery.queryTime[1] / 1000;
      }
      this.listQuery.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      if (this.listQuery.queryTime.length > 1) {
        this.listQuery.startTime = this.listQuery.queryTime[0] / 1000;
        this.listQuery.endTime = this.listQuery.queryTime[1] / 1000;
      }
      this.listQuery.page = val;
      this.fetchData();
    },
    setAreaCode(value) {
      if (value.code) {
        this.listQuery.areaCode = value.code;
      }
    },
    handleDetail(row) {
      this.$router.push({
        name: "queryLivingAllowancesChange",
        query: {
          action: "view",
          approvalId: row.approvalId,
          approvalKey: this.approvalKey
        }
      });
    },
    handleChange(row) {
      this.$router.push({
        name: "queryLivingAllowancesChange",
        query: { action: "change", approvalId: row.approvalId, approvalKey: this.approvalKey }
      });
    },
    handleChangeReport(row) {
      this.$router.push({
        name: "queryLivingAllowancesChange",
        query: { action: "changeReport", approvalId: row.approvalId, approvalKey: this.approvalKey}
      });
    },
    handleAgain(row) {
      queryLADetail(row.approvalId).then(res => {
        this.$router.push({
          name: "collect",
          query: { applicationData: res.data, approvalKey: row.approvalKey, approvalKey: this.approvalKey, action: 'again' }
        });
      });
    },
    handleGive() {
      if(this.list.length===0){
        this.$message.warning('未选中人员')
        return
      }
      laGive(this.listQuery).then(() => {
        this.fetchData()
        this.$notify({
          title: "成功",
          message: "发放成功",
          type: "success",
          duration: 2000
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleExportExcel() {
      this.exportExcelDialog = true;
    },
    handleCheckAllColumnsChange(val) {
      if (val) {
        this.exportColumns.forEach(e => {
          e.checked = true;
          this.listQuery.columns.push(e.value);
        });
      } else {
        this.exportColumns.forEach(e => {
          e.checked = false;
        });
        this.listQuery.columns = [];
      }
      this.isIndeterminate = false;
    },
    handleCheckColumnsChange(value) {
      let checkedCount = value.length;
      this.checkAllColumns = checkedCount === this.exportColumns.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.exportColumns.length;
    },
    exportExcel() {
      let url = this.exportExcelUrl + "?X-Token=" + getToken();
      url += this.joinQueryCondition();
      window.open(url);
    },
    exportMemberExcel() {
      let url = this.exprotMemberExcelUrl + "?X-Token=" + getToken();
      url += this.joinQueryCondition();
      window.open(url);
    },

    joinQueryCondition() {
      let condition = "";
      if (this.listQuery.approvalKey) {
        condition += "&approvalKey=" + this.listQuery.approvalKey;
      }
      if (this.listQuery.areaCode) {
        condition += "&areaCode=" + this.listQuery.areaCode;
      }
      if (this.listQuery.startTime) {
        condition += "&startTime=" + this.listQuery.startTime;
      }
      if (this.listQuery.endTime) {
        condition += "&endTime=" + this.listQuery.endTime;
      }
      if (this.listQuery.remindFlag) {
        condition += "&remindFlag=" + this.listQuery.remindFlag;
      }
      if (this.listQuery.householdType) {
        condition += "&householdType=" + this.listQuery.householdType;
      }
      condition += "&xlsx=" + this.listQuery.xlsx;
      if (this.listQuery.columns.length > 0) {
        condition += "&columns=" + this.listQuery.columns.join(",");
      }
      return condition;
    }
  }
};
</script>

<style scoped>
.cellOption {
  float: right;
}
.small-padding,
.fixed-width {
  display: flex !important;
  justify-content: center !important;
}
.app-containerlivingAllowances .el-checkbox {
  margin-left: 30px;
}
.cell > div {
  margin-top: 10px;
}
.cell > div .el-row {
  margin-top: 10px;
}
.expressPrint_ft {
  height: 90px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 45px;
}

.expressPrint_title {
  height: 80px;
  width: 100%;
}

.expressPrint_main {
  /* width: 900px; */
  height: 680px;
  overflow: hidden;
  border-radius: 5px;
  background-color: #fff;
}

#expressPrint {
  /* width: 850px; */
  height: 500px;
  background-color: #fff;
  overflow: scroll;
  margin-left: 25px;
  border: 1px solid #ccc;
}

.expressPrint_box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2008;
}

/* 打印 */

.filter-container-option {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 15px;
}

.filter-container {
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 25px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

.filter-itemBut {
  margin-left: 25px;
}
</style>